
import React, { Component } from "react";
import "./index.css";
export default class Item extends Component {
  state = { mouse: false };
  handleMouse = (flage) => {
    return () => {
      this.setState({
        mouse: flage,
      });
    };
  };
  changeChecked = (id) => {
    return (event) => {
      console.log(id, event.target.checked);
      //把拿到的 id和状态传过去
      this.props.updateTodo(id, event.target.checked);
    };
  };
  //删除
  handleDel = (id) => {
    if (window.confirm("你确定删除吗？")) {
      this.props.delTodo(id);
    }
  };

  render() {
    let { name, done, id } = this.props;
    // console.log(name);
    return (
      <li
        onMouseEnter={this.handleMouse(true)}
        onMouseLeave={this.handleMouse(false)}
        style={{ backgroundColor: this.state.mouse ? "#ddd" : "white" }}
        onChange={this.changeChecked(id)}
      >
        <label>
          <input type="checkbox" defaultChecked={done} />
          <span>{name}</span>
        </label>
        <button
          className="btn btn-danger"
          onClick={() => this.handleDel(id)}
          style={{ display: this.state.mouse ? "block" : "none" }}
        >
          删除
        </button>
      </li>
    );
  }

}
